function have(id) {
	return document.getElementById(id) ? true : false;
}

function lineChartkzks(id, seriesData, legendData, xData, xunit, yunit, rotate) {
	let chart = echarts.init(document.getElementById(id));
	chart.clear();
	let option = {
		backgroundColor: "#fff",
		tooltip: {
			trigger: "axis",
			axisPointer: {
				lineStyle: {
					type: "dashed",
					color: "#C9CDD4",
				},
			},
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			formatter: function(params) {
				let result = `<div  class="chartFormart">
							<p style="color: #1D2129;font-size: 12px;font-weight: 600;">${params[0].name}${xunit}</p>`;
				params.forEach(function(item) {
					result += `
							<div  class="chartItemFormart">
								<div style="display: flex; flex-direction: row;align-items: center;">
									${item.marker}
									<p style="color: #4E5969;font-size: 12px;">${item.seriesName || legendData[0]}</p>
								</div>
								<div class="">
									<h4 style="color: #1D2129;font-size: 14px;font-weight: 600;">${figure(item.value)}<span style="font-weight: normal;color: #86909C;font-size: 12px;">万元</span></h4>
								</div>
							</div>
						`;
				});
				result += `</div>`;
				return result;
			},
		},
		legend: {
			data: legendData,
			top: "-3",
			textStyle: {
				color: "#1D2129",
				fontSize: "12",
			},
			itemWidth: 8,
			itemHeight: 2,
		},
		xAxis: {
			name: xunit,
			nameTextStyle: {
				color: "#86909C",
				fontSize: 10,
			},
			type: "category",
			data: xData,
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#C9CDD4'
				}
			},
			axisLabel: {
				fontSize: 12,
				color: "#86909C",
				width: 80,
				rotate: rotate ? rotate : 0,
				overflow: 'truncate',
				ellipsis: '...',
			},
		},
		grid: {
			left: "0",
			right: "30",
			bottom: "0",
			top: "30",
			containLabel: true,
		},
		yAxis: {
			name: yunit,
			nameTextStyle: {
				color: "#86909C",
				fontSize: 12,
			},
			type: "value",
			axisLabel: {
				fontSize: 12,
				color: "#86909C",
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E5E6EB",
					type: "dashed",
				},
			},
			axisLine: {
				show: false,
			},
		},

		series: seriesData,
	};
	chart.setOption(option);
	window.addEventListener("resize", function() {
		chart.resize();
	});
	$("div").resize(function() {
		chart.resize();
	});
}


function pieChart1(id, seriesData, handleClick) {
	let chart = echarts.init(document.getElementById(id));
	const colorList = ['#165DFF', '#50CD89', '#722ED1']
	chart.clear();
	let option = {
		color: colorList,
		tooltip: {
			trigger: "item",
			axisPointer: {
				type: "shadow",
				lineStyle: {
					type: "dashed",
					color: "#C9CDD4",
				},
			},
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			formatter: function(params) {
				let result = `<div style="width:180px;padding: 8px;
						border-radius: 6px;
						border:1px solid #FFFFFF ;
						box-shadow: 0 2px 5px 1px rgba(199, 211, 233, 0.83);
						background: -moz-linear-gradient(top, #F4F7FC 0%, #ffffff 100%);
						background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F7FC), color-stop(100%,#ffffff));
						background: -webkit-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
						background: -o-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
						background: -ms-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
						background: linear-gradient(to bottom, #F4F7FC 0%,#ffffff 100%);">
						<div style="display: flex; flex-direction: row;justify-content: space-between;" >
													<div style="display: flex; flex-direction: row;align-items: center;">
														${params.marker}
														<p style="color: #4E5969;font-size: 12px;font-weight:600;">${params.name}</p>
													</div>
													<div class="">
														<h4 style="color: #1D2129;font-size: 14px;font-weight: 600;">${params.percent}<span style="font-weight: normal;color: #86909C;font-size: 12px;">%</span></h4>
													</div>
												</div>
												</div>`;
				return result;
			},
		},
		legend: {
			orient: 'vertical',
			right: 'right',
			top: 'center',
			show: false
		},
		series: seriesData
	};
	chart.setOption(option);
	chart.on('click', function(params) {
		handleClick(params)
	});
	window.addEventListener("resize", function() {
		chart.resize();
	});
	$("div").resize(function() {
		chart.resize();
	});
}


function mulitYBar1(id, xData, legendData, seriesData, xunit, yunit, yunit2, legendShow = true, percShow = true) {
	let chart = echarts.init(document.getElementById(id));
	chart.clear();
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
				lineStyle: {
					type: "dashed",
					color: "#C9CDD4",
				},
			},
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			formatter: function(params) {
				let result = `<div class="chartFormart">
									<p style="color: #1D2129;font-size: 12px;font-weight: 600;">${params[0].name}${xunit}</p>`;
				params.forEach(function(item) {
					result += `<div class="chartItemFormart">
										<div style="display: flex; flex-direction: row;align-items: center;">
											${item.marker}
											<p style="color: #4E5969;font-size: 12px;">${item.seriesName}</p>
										</div>
										<div class="">
											<h4 style="color: #1D2129;font-size: 14px;font-weight: 600;">${figure(
                        item.value
                      )}<span style="font-weight: normal;color: #86909C;font-size: 12px;">`;
					if (item.componentSubType == "line") {
						result += yunit2;
					} else {
						result += yunit;
					}
					result += `</span></h4>
										</div>
									</div>`;
				});
				result += `</div>`;
				return result;
			},
		},
		grid: {
			left: "0",
			right: "10",
			bottom: "14",
			top: "30",
			containLabel: true,
		},
		legend: {
			data: legendData,
			show: legendShow,
			top: "-3",
			textStyle: {
				color: "#1D2129",
				fontSize: "12",
			},
			itemWidth: 8,
			itemHeight: 8,
		},
		xAxis: [{
			type: "category",
			data: xData,
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#C9CDD4'
				}
			},
			axisLabel: {
				fontSize: 12,
				color: "#86909C",
				interval: 0,
			},
		}, ],
		yAxis: [{
				type: "value",
				name: `${yunit}`,
				nameTextStyle: {
					color: "#86909C",
					fontSize: 10,
				},
				axisLabel: {
					fontSize: 12,
					color: "#86909C",
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#E5E6EB",
						type: "dashed",
					},
				},
				axisLine: {
					show: false,
				},
			},
			{
				show: percShow,
				type: "value",
				name: `${yunit2}`,
				position: "right",
				alignTicks: true,
				axisLine: {
					lineStyle: {
						fontSize: 12,
						color: "#86909C",
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#E5E6EB",
						type: "dashed",
					},
				},
				axisLabel: {
					formatter: "{value}",
				},
			},
		],
		series: seriesData,
	};
	chart.setOption(option);
	window.addEventListener("resize", function() {
		chart.resize();
	});
	$("div").resize(function() {
		chart.resize();
	});
}

function barChart1(id, seriesData, legendData, xData, xunit, yunit, rotate, legendPos, dataZoom) {
	let chart = echarts.init(document.getElementById(id));
	chart.clear();
	let option = {
		legend: {
			data: legendData,
			show: true,
			right: "0",
			top: "0",
			textStyle: {
				color: "#1D2129",
				fontSize: "12",
			},
			icon: 'rect',
			itemWidth: 8,
			itemHeight: 8,
			...legendPos
		},
		xAxis: {
			name: '',
			nameTextStyle: {
				color: "#86909C",
				fontSize: 10,
			},
			type: "category",
			data: xData ? xData : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			axisLabel: {
				rotate: rotate > 0 ? rotate : 0,
				fontSize: 12,
				color: "#86909C",
			},
		},
		dataZoom: [{
			show: dataZoom,
			type: 'slider',
			start: 0,
			"height": 10,
			end: dataZoom ? 60 : 100,
			bottom: 5,
			orient: 'horizontal',
			handleStyle: {
				color: "#6AA1FF",
			},
			textStyle: {
				color: "#fff"
			}
		}],
		backgroundColor: "#fff",
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
				lineStyle: {
					type: "dashed",
					color: "#C9CDD4",
				},
			},
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			formatter: function(params) {
				let result = `<div style="width:240px;padding: 8px;
		border-radius: 6px;
		border:1px solid #FFFFFF ;
		position: relative;
		z-index: 9999;
		box-shadow: 0 2px 5px 1px rgba(199, 211, 233, 0.83);
		background: -moz-linear-gradient(top, #F4F7FC 0%, #ffffff 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F7FC), color-stop(100%,#ffffff));
		background: -webkit-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
		background: -o-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
		background: -ms-linear-gradient(top, #F4F7FC 0%,#ffffff 100%);
		background: linear-gradient(to bottom, #F4F7FC 0%,#ffffff 100%);">
								<p style="color: #1D2129;font-size: 12px;font-weight: 600;">${params[0].name}${xunit}</p>`;
				params.forEach(function(item) {
					result += `
								<div style="display: flex; flex-direction: row;justify-content: space-between;
								background: #FFFFFF;border-radius: 4px;box-shadow: 6px 0 20px 1px rgba(34, 87, 188, 0.1);padding:6px 8px; margin-top: 4px;" >
									<div style="display: flex; flex-direction: row;align-items: center;">
										${item.marker}
										<p style="color: #4E5969;font-size: 12px;">${item.seriesName}</p>
									</div>
									<div class="">
										<h4 style="color: #1D2129;font-size: 14px;font-weight: 600;">${item.value}<span style="font-weight: normal;color: #86909C;font-size: 12px;">万元</span></h4>
									</div>
								</div>
							`;
				});
				result += `</div>`;
				return result;
			},
		},
		grid: {
			left: "0",
			right: "5",
			bottom: !legendPos ? dataZoom ? "20" : "0" : dataZoom ? "60" : "40",
			top: legendPos ? "30" : "40",
			containLabel: true,
		},
		yAxis: {
			name: yunit,
			nameTextStyle: {
				color: "#86909C",
				fontSize: 10,
			},
			type: "value",
			// max: '100',
			axisLabel: {
				fontSize: 12,
				color: "#86909C",
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E5E6EB",
					type: "dashed",
				},
			},
			axisLine: {
				show: false,
			},
		},
		series: seriesData,
	};
	chart.setOption(option);
	window.addEventListener("resize", function() {
		chart.resize();
	});
	$("div").resize(function() {
		chart.resize();
	});
}

function figure(data) {
	let str = "";
	let num = "";
	let newStr = "";
	data = data + "";
	if (data.indexOf(".") != -1) {
		num = data.split(".")[0];
		str = data.split(".")[1];
	} else {
		num = data;
	}
	newStr = num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
	newStr = str == "" ? newStr : newStr + "." + str;
	return newStr;
}

function renderTable(elId, data, columns, isShowFooter) {
	noData(elId, data)
	let $table = $(`#${elId}`);
	$table.bootstrapTable('destroy');
	$table.bootstrapTable({
		data: data,
		height: $(`.${elId}`).height(),
		idField: 'id',
		showColumns: false,
		fixedColumns: true,
		fixedNumber: 1,
		fixedRightNumber: 1,
		showFooter: isShowFooter,
		columns: columns,
	})
}

function chart_name(name, str = '；') {
	const legend = name.split(str);
	return legend.map(item => {
		let newIt = item.split('-').splice(1)[0]
		if (newIt.indexOf('{') > -1) {
			newIt = newIt.replace('{', '')
		}
		if (newIt.indexOf('}') > -1) {
			newIt = newIt.replace('}', '')
		}
		return newIt
	})
}

function noData(elId, data) {
	const _data = elId.indexOf('table') > -1 ? data : data.data;
	if (_data.length === 0) {
		if ($(`#${elId}`)) {
			$(`.${elId}`).html(`<div class="nowrap">
	        <div class="noData">
	            <img src="assets/images/mask/budget-All-IncomingPayment.svg" >
	            <p>暂无数据</p>
	        </div>
	    </div>`)
		}
		return
	}
	if ($(`.${elId} .nowrap`)) {
		elId.indexOf('table') > -1 ? $(`.${elId}`).html(`<table id=${elId}></table>`) : $(`.${elId}`).html(
			`<div id=${elId} class="chart"></div>`);
	}

}

function total() {
	return '总计'
}

function wyText(value) {
	return `<p>${value}</p>`
}

function blodText(value) {
	return `<h6>${value}</h6>`
}

function sum(data) {
	var field = this.field
	return Math.floor(data.map(function(row) {
		return +row[field]
	}).reduce(function(sum, i) {
		return sum + i
	}, 0))
}